<template>
  <div w-full @click="toArticleDetail">
    <!-- 左图右文 -->
    <div
      v-if="props.classifyStyle == 1 && item.styleType == 1"
      w-full
      class="item-card"
      flex
    >
      <image
        mode="aspectFill"
        shrink-0
        w-331px
        h-259px
        rounded-29px
        mr-43px
        :src="item.img"
        alt=""
      />
      <div flex flex-col justify-between>
        <div line-clamp-2 break-all text-46px>
          {{ item.title }}
        </div>
        <div
          v-if="item.summarize"
          text="#484848"
          text-40px
          mt-20px
          line-clamp-2
        >
          {{ item.summarize }}
        </div>
        <div flex items-center text-29px mt-29px text="#999">
          <span v-if="item.source" mr-29px>{{ item.source }}</span>
          <span>{{ item.publishTime }}</span>
        </div>
      </div>
    </div>

    <!-- 左文右图 -->
    <div
      v-if="props.classifyStyle == 1 && item.styleType == 2"
      w-full
      class="item-card"
      flex
      justify-between
    >
      <div flex flex-col justify-between>
        <div line-clamp-2 break-all text-46px>
          {{ item.title }}
        </div>
        <div
          v-if="item.summarize"
          text="#484848"
          text-40px
          mt-20px
          line-clamp-2
        >
          {{ item.summarize }}
        </div>
        <div flex items-center text-29px mt-29px text="#999">
          <span v-if="item.source" mr-29px>{{ item.source }}</span>
          <span>{{ item.publishTime }}</span>
        </div>
      </div>
      <image
        mode="aspectFill"
        shrink-0
        w-331px
        h-259px
        rounded-29px
        ml-29px
        :src="item.img"
        alt=""
      />
    </div>
    <!-- 上文下图 -->
    <div
      v-if="props.classifyStyle == 1 && item.styleType == 3"
      w-full
      class="item-card"
    >
      <div line-clamp-2 break-all text-46px>{{ item.title }}</div>
      <div v-if="item.summarize" text="#484848" text-40px mt-20px line-clamp-2>
        {{ item.summarize }}
      </div>
      <image
        mode="aspectFill"
        w-full
        h-518px
        rounded-29px
        mt-29px
        :src="item.img"
        alt=""
      />
      <div flex items-center text-29px mt-29px text="#999">
        <span v-if="item.source" mr-29px>{{ item.source }}</span>
        <span>{{ item.publishTime }}</span>
      </div>
    </div>
    <!-- 三图并列 -->
    <div
      v-if="props.classifyStyle == 1 && item.styleType == 4"
      w-full
      class="item-card"
    >
      <div line-clamp-2 break-all text-46px>
        {{ item.title }}
      </div>
      <div v-if="item.summarize" text="#484848" text-40px mt-20px line-clamp-2>
        {{ item.summarize }}
      </div>

      <div grid grid-cols-3 gap-7px mt-29px>
        <image
          mode="aspectFill"
          v-for="(img, index) in item.img.split(',')"
          :class="{ 'three-img-1': index == 0, 'three-img-3': index == 2 }"
          w-full
          h-259px
          :src="img"
        />
      </div>
      <div flex items-center text-29px mt-29px text="#999">
        <span v-if="item.source" mr-29px>{{ item.source }}</span>
        <span>{{ item.publishTime }}</span>
      </div>
    </div>
    <!-- 无图纯文 -->
    <div
      v-if="props.classifyStyle == 1 && item.styleType == 5"
      w-full
      class="item-card"
    >
      <div line-clamp-2 break-all text-46px>
        {{ item.title }}
      </div>
      <div v-if="item.summarize" text="#484848" text-40px mt-20px line-clamp-2>
        {{ item.summarize }}
      </div>
      <div flex items-center text-29px mt-29px text="#999">
        <span v-if="item.source" mr-29px>{{ item.source }}</span>
        <span>{{ item.publishTime }}</span>
      </div>
    </div>

    <!-- 视频 -->
    <div
      v-if="props.classifyStyle == 1 && item.styleType == 6"
      w-full
      class="item-card"
    >
      <div line-clamp-2 break-all text-46px>
        {{ item.title }}
      </div>
      <div v-if="item.summarize" text="#484848" text-40px mt-20px line-clamp-2>
        {{ item.summarize }}
      </div>
      <div w-full relative flex justify-center items-center>
        <image
          mode="aspectFill"
          w-full
          h-518px
          rounded-29px
          mt-29px
          :src="item.img"
          alt=""
        />
        <image
          mode="aspectFill"
          w-66px
          h-66px
          absolute
          src="@/static/play.png"
        ></image>
      </div>

      <div flex items-center text-29px mt-29px text="#999">
        <span v-if="item.source" mr-29px>{{ item.source }}</span>
        <span>{{ item.publishTime }}</span>
      </div>
    </div>
    <!-- 一行两列 -->
    <div
      v-if="props.classifyStyle == 2"
      class="row-1-col-2"
      w-full
      pb-29px
      rounded-29px
    >
      <image
        mode="aspectFill"
        w-full
        h-329px
        rounded-t-29px
        :src="item.img"
        alt=""
      />
      <div line-clamp-1 break-all text-46px px-20px>{{ item.title }}</div>
      <div line-clamp-1 flex items-center text-29px mt-20px px-20px text="#999">
        <span v-if="item.summarize">{{ item.summarize }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    item: any
    classifyStyle: any
  }>(),
  {
    item: {}, // 默认值为一个空对象
    classifyStyle: '1' // 默认值为字符串
  }
)

function toArticleDetail() {
  uni.navigateTo({
    url: '/pages/p'
  })
}
</script>

<style scoped>
.item-card {
  padding: 40px 0;
  border-bottom: 4px solid #f0f0f0;
}
.three-img-1 {
  border-radius: 29px 0 0 29px;
}
.three-img-3 {
  border-radius: 0 29px 29px 0;
}
.row-1-col-2 {
  background: #fff;
  box-shadow: 0px 2px 29px 0px rgba(128, 128, 128, 0.1);
}
</style>
